<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="./plugin/layui/css/layui.css"/>
    <script src="plugin/layui/layui.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/echarts.js"></script>
    <style>
        #content{
            width: 500px;
        }
        #search{
            margin-left: 400px;
        }

    </style>
</head>
<body>
    <div id="content" style="float:left ">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">班级</label>
                <div class="layui-input-block">
                    <select name="clazz" id="clazz" lay-verify="required">

                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">学期</label>
                <div class="layui-input-block">
                    <select name="term" id="term" lay-verify="required">
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">科目</label>
                <div class="layui-input-block">
                    <select name="subject" id="subject" lay-verify="required">
                        <option value="1">语文</option>
                        <option value="2">数学</option>
                        <option value="3">英语</option>
                        <option value="4">物理</option>
                        <option value="5">化学</option>
                        <option value="6">生物</option>
                        <option value="7">政治</option>
                        <option value="8">历史</option>
                        <option value="9">地理</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">考试类型</label>
                <div class="layui-input-block">
                    <select name="type" id="type" lay-verify="required">
                        <option value="4">月考</option>
                        <option value="5">期中考</option>
                        <option value="6">期末考</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">考试时间</label>
                <div class="layui-input-block">
                    <input type="text" id="time" name="time" class="layui-input">
                </div>
            </div>
            <input type="button" id="search" value="查询" class="layui-btn">
        </form>
    </div>
    <div id="main1" style="float:left; width: 500px;height:400px;"></div>
    <div id="main2" style="float:left; width: 500px;height:400px;"></div>
    <div id="main3" style="float:left; width: 500px;height:400px;"></div>

    <script>
        //成绩分析 李英勇


        let refreshToken = localStorage.getItem("refreshToken");
        let token = localStorage.getItem("token");

        layui.use(['jquery', 'layer', 'laydate','form'], function(){
            let $ = layui.jquery, layer = layui.layer, laydate= layui.laydate,form=layui.form;

            let refreshToken = localStorage.getItem("refreshToken");
            let token=localStorage.getItem("token");

            //年月选择器
            laydate.render({
                elem: '#time'
                ,type: 'month'
            });
            //给查询按钮增加点击事件
            $("#search").on("click",function(e){
                e.preventDefault();
                //获取每个下拉框的值
                var clazz=$("#clazz").val();
                var term=$("#term").val();
                var subject=$("#subject").val();
                var type=$("#type").val();
                var time=$("#time").val();

                //判断时间是否有值 没有值表示查询这位学生一阶段的月考成绩
                if(time==''&& type==4){
                    $.ajax({
                        url:"findMonthScore",
                        type:"get",
                        headers:{"refreshToken": refreshToken,"token":token},
                        data:{
                            "clazz":clazz,
                            "paperTerm":term,
                            "paperType":type,
                            "paperSubject":subject,
                            "paperDate":time
                        },
                        success:function(res){
                            if(res.code==0){
                                //准备数据
                                var data=new Array();
                                var month=['month'];
                                var series=[];
                                var n=1;

                                //均分
                                var avg=[];
                                var nameAvg=[];
                                var m=0;
                                var total=0;
                                for(var key in res.data){
                                    var name=[];
                                    name[0]=key;
                                    console.log(key,res.data);
                                    console.log(key,res.data[key]);
                                    console.log(key,res.data[key].length);

                                    nameAvg[m]=key;

                                    for(var i=0;i<res.data[key].length;i++){
                                        month[i+1]=res.data[key][i].sheetTime;
                                        name[i+1]=res.data[key][i].sheetScore;
                                        series[i]={type: 'bar'};

                                        //总分
                                        total+=res.data[key][i].sheetScore;

                                        console.log(res.data[key][i].sheetTime,res.data[key][i].sheetScore);
                                    }
                                    data[n]=name;
                                    avg[m]=total/res.data[key].length;
                                    total=0;
                                    n++;
                                    m++;
                                }
                                data[0]=month;
                                console.log(data);

                                if(subject==1){
                                    subject="语文";
                                }else if(subject==2){
                                    subject="数学";
                                }else if(subject==3){
                                    subject="英语";
                                }else if(subject==4){
                                    subject="物理";
                                }else if(subject==5){
                                    subject="化学";
                                }else if(subject==6){
                                    subject="生物";
                                }else if(subject==7){
                                    subject="政治";
                                }else if(subject==8){
                                    subject="历史";
                                }else if(subject==9){
                                    subject="地理";
                                }
                                //所有的月考成绩
                                // 基于准备好的dom，初始化echarts实例
                                var myChart = echarts.init(document.getElementById('main2'));

                                // 指定图表的配置项和数据
                                var option = {
                                    title: {
                                        text: subject+"月考"
                                    },
                                    legend: {},
                                    tooltip: {},
                                    dataset: {
                                        // 提供一份数据。
                                        source: data
                                    },
                                    // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
                                    xAxis: {type: 'category'},
                                    // 声明一个 Y 轴，数值轴。
                                    yAxis: {},
                                    // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
                                    series: series
                                };

                                // 使用刚指定的配置项和数据显示图表。
                                myChart.setOption(option);

                                //平均成绩
                                // 基于准备好的dom，初始化echarts实例
                                var myChart = echarts.init(document.getElementById('main3'));
                                // 指定图表的配置项和数据
                                var option = {
                                    title: {
                                        text: subject+"月考平均成绩"
                                    },
                                    tooltip: {},
                                    legend: {
                                        data:['分数']
                                    },
                                    xAxis: {
                                        data: nameAvg
                                    },
                                    yAxis: {},
                                    series: [{
                                        name: '分数',
                                        type: 'bar',
                                        data: avg
                                    }]
                                };

                                // 使用刚指定的配置项和数据显示图表。
                                myChart.setOption(option);


                            }
                        }
                    });


                }else{
                    console.log(clazz,term,subject,type,time);
                    $.ajax({
                        url:"findScore",
                        type:"get",
                        headers:{"refreshToken": refreshToken,"token":token},
                        data:{
                            "clazz":clazz,
                            "paperTerm":term,
                            "paperType":type,
                            "paperSubject":subject,
                            "paperDate":time
                        },
                        success:function(res){
                            if(res.code==0){
                                console.log(res.data);
                                //准备数据
                                var name=[];
                                var score=[];
                                for(var i=0;i<res.data.length;i++){
                                    name[i]=res.data[i].sheetStudent;
                                    score[i]=res.data[i].sheetScore;
                                }

                                if(subject==1){
                                    subject="语文";
                                }else if(subject==2){
                                    subject="数学";
                                }else if(subject==3){
                                    subject="英语";
                                }else if(subject==4){
                                    subject="物理";
                                }else if(subject==5){
                                    subject="化学";
                                }else if(subject==6){
                                    subject="生物";
                                }else if(subject==7){
                                    subject="政治";
                                }else if(subject==8){
                                    subject="历史";
                                }else if(subject==9){
                                    subject="地理";
                                }

                                // 基于准备好的dom，初始化echarts实例
                                var myChart = echarts.init(document.getElementById('main1'));
                                // 指定图表的配置项和数据
                                var option = {
                                    title: {
                                        text: time+":"+subject+"月考成绩"
                                    },
                                    tooltip: {},
                                    legend: {
                                        data:['分数']
                                    },
                                    xAxis: {
                                        data: name
                                    },
                                    yAxis: {},
                                    series: [{
                                        name: '分数',
                                        type: 'bar',
                                        data: score
                                    }]
                                };

                                // 使用刚指定的配置项和数据显示图表。
                                myChart.setOption(option);
                            }
                        }
                    });
                }

            });
            //初始化加载班级
            $.ajax({
                url:"findClazz",
                headers:{"refreshToken": refreshToken,"token":token},
                type:"get",
                success:function(res){
                    if(res.code==0){
                        console.log(res.data);
                        for(var i=0;i<res.data.length;i++){
                            $("#clazz").append(new Option(res.data[i].tname, res.data[i].tname));
                            if(res.data[i].gradeInfo.gradeType=="高一"){
                                var key1="高一上";
                                var key2="高一下";
                                var value1=1;
                                var value2=2;
                            }else if(res.data[i].gradeInfo.gradeType=="高二"){
                                var key1="高二上";
                                var key2="高二下";
                                var value1=3;
                                var value2=4;
                            }else if(res.data[i].gradeInfo.gradeType=="高三"){
                                var key1="高三上";
                                var key2="高三下";
                                var value1=5;
                                var value2=6;
                            }
                            $("#term").append(new Option(key1,value1));
                            $("#term").append(new Option(key2,value2));
                            //重新渲染表单
                            var form = layui.form;
                            form.render();
                            }
                        }
                    }
            });
        });
    </script>
</body>
</html>